<template>
    <div id="main">

    </div>
</template>

<script setup>
import {onMounted} from 'vue'

import * as echarts from 'echarts';
onMounted(()=>{
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
let colors=['#5470c6','#E80000','#fac858','#ee6666','#73c0de','#3ba272']
var option;

const labelRight = {
  position: 'right'
};
option = {
  title: {
    text: 'Bar Chart with Negative Value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 80,
    bottom: 30
  },
  xAxis: {
    type: 'value',
    position: 'top',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
    data: [
      'ten',
      'nine',
      'eight',
      'seven',
      'six',
      'five',
      'four',
      'three',
      'two',
      'one'
    ]
  },
  series: [
    {
      name: 'Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        formatter: '{b}'
      },
      data: [
       { value: -8.44, label: labelRight },
        { value: 9.4, label: labelRight },
        -2.31,
        2.42,
        { value: -1.5, label: labelRight },
        2.69,
        { value: -7.77, label: labelRight },
        7.79,
        { value: 0.2, label: labelRight },
        7.77
      ],
      itemStyle:{ 
            color:params=>colors[params.dataIndex] || '#fac858' 
        }
    }
  ]
};

option && myChart.setOption(option);
})

























// import * as echarts from 'echarts/core';
// import {
//   TitleComponent,
//   TooltipComponent,
//   GridComponent
// } from 'echarts/components';
// import { BarChart } from 'echarts/charts';
// import { CanvasRenderer } from 'echarts/renderers';



// onMounted(()=>{
//     echarts.use([
//   TitleComponent,
//   TooltipComponent,
//   GridComponent,
//   BarChart,
//   CanvasRenderer
// ]);
// let colors=['#5470c6','#E80000','#fac858','#ee6666','#73c0de','#3ba272']
// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom, 'dark');
// const labelRight = {
//   position: 'right'
// };
// let option = {
//   title: {
//     text: 'Bar Chart with Negative Value'
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     }
//   },
//   grid: {
//     top: 80,
//     bottom: 30
//   },
//   xAxis: {
//     type: 'value',
//     position: 'top',
//     splitLine: {
//       lineStyle: {
//         type: 'dashed'
//       }
//     }
//   },
//   yAxis: {
//     type: 'category',
//     axisLine: { show: false },
//     axisLabel: { show: false },
//     axisTick: { show: false },
//     splitLine: { show: false },
//     data: [
//       'ten',
//       'nine',
//       'eight',
//       'seven',
//       'six',
//       'five',
//       'four',
//       'three',
//       'two',
//       'one'
//     ]
//   },
//   series: [
//     {
//       name: 'Cost',
//       type: 'bar',
//       stack: 'Total',
      
//       label: {
//         show: true,
//         formatter: '{b}'
//       },
//       data: [
//         { value: -8.44, label: labelRight },
//         { value: 9.4, label: labelRight },
//         -2.31,
//         2.42,
//         { value: -1.5, label: labelRight },
//         2.69,
//         { value: -7.77, label: labelRight },
//         7.79,
//         { value: 0.2, label: labelRight },
//         7.77
//       ],
//       itemStyle:{ 
//             color:params=>colors[params.dataIndex] || '#fac858' 
//         }
//     }
//   ]
// };
// option && myChart.setOption(option);
// })




</script>

<style lang='scss' scoped >
#main{
    width: 700px;
    height: 400px;
    margin: 0 auto
}
</style>
